<template>
	<view>
		<carHeader :title="'汽车保养'"></carHeader>
		<!-- 内容 -->
		<view class="nr">
			<!-- 地图 -->
			<view class="map">
				<map id="map" :latitude="latitude" scale="14" @markertap="onMarkerTap" :longitude="longitude"
					:markers="markers">
				</map>
			</view>
			<!-- 门店 -->
			<view class="md">
				<!-- 路程 -->
				<view class="lc">
					{{distance}}
				</view>
				<!-- 名字 -->
				<view class="name">
					{{name}}
				</view>
				<!-- 评分 -->
				<view class="pf">
					<uni-rate size="17" :value="star" style="display: inline-block;" />
					<text style="line-height: 20px;position: relative;left: 16px;">{{star}}分</text>
				</view>
				<!-- 营业时间 -->
				<view class="time">
					{{yingyeTime}}
				</view>
				<!-- 营业时间 -->
				<view class="adress">
					{{address}}
				</view>
				<view class="picture">
					<image :src="faceImg" mode="">
					</image>
				</view>
				<view class="button">
					<view class="button1" @click="open">
						<image src="@/static/车联网服务-04汽车保养_slices/电话.png" mode=""></image>
						联系门店

						<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
							<uni-popup-message type="success" message="成功消息"></uni-popup-message>
							<uni-popup-message type="success" message="成功消息"></uni-popup-message>
							<uni-popup-message type="success" message="成功消息"></uni-popup-message>
						</uni-popup>
					</view>
					<view class="button2" @click="goTo">
						<image src="@/static/车联网服务-04汽车保养_slices/预约.png" mode=""></image>
						立即预订
					</view>
				</view>
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: null,
				longitude: null,
				markers: [],
				selectedMarker: null, // 用于存储被选中的marker  
				name:'无数据',
				star:0,
				address:'无数据',
				yingyeTime:'无数据',
				distance:'0公里',
				faceImg:''
			}
		},

		onLoad() {
			this.getshop()
		},
		methods: {
			getshop() {
				uni.request({
					url: 'http://localhost:8080/user/selecezuobiao', // 改为你的实际接口地址  
					method: 'POST', // 或者 'POST'  
					success: (res) => {
						// 请求成功，res为服务器返回的数据  
						if (res.statusCode === 200) {
							this.markers = res.data
							this.latitude = res.data[0].latitude
							this.longitude = res.data[0].longitude
						} else {
							// 请求失败或服务器返回错误状态码  
							console.error('请求失败', res);
						}
					},
					fail: (err) => {
						// 请求失败  
						console.error('请求失败', err);
					}
				});
			},
			onMarkerTap(e) {
				const {
					markerId
				} = e.detail; // 假设你通过某种方式在marker中设置了id  
				this.selectedMarker = this.markers.find(marker => marker.id === markerId);
				if (this.selectedMarker) {
					// 可以在这里做其他处理，比如更新页面数据等 
					console.log(this.selectedMarker.id);
					uni.request({
						url: 'http://localhost:8080/user/selectShopById/' + this.selectedMarker.id, // 改为你的实际接口地址  
						method: 'POST', // 或者 'POST'  
						success: (res) => {
							// 请求成功，res为服务器返回的数据  
							console.log(res.data.faceImg)
							if (res.statusCode === 200) {
								
								this.name = res.data.shopName
								this.star = res.data.star
								this.address = res.data.area + ' ' +  res.data.address
								this.yingyeTime = res.data.yingyeTime+ ' ' + res.data.jutiTime
								this.distance = res.data.distance +'公里'
								this.faceImg = res.data.faceImg
							} else {
								// 请求失败或服务器返回错误状态码  
								console.error('请求失败', res);
							}
						},
						fail: (err) => {
							// 请求失败  
							console.error('请求失败', err);
						}
					});
				}else{
					console.log('No marker found with id:', markerId);  
					    // 你可以在这里重置 selectedMarker 为 null 或其他默认值  
					    this.selectedMarker = null;  
				}
			},
			bookBack() {
				uni.navigateBack()
			},
			bookDescription() {
				uni.navigateTo({
					url: '/pages/clwx/yyxq'
				})
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			goTo() {
				uni.navigateTo({
					url: '/pages/qcby/fjmd'
				})
			}
		}
	}
</script>

<style lang="scss">
	.map {
		background-color: white;
		height: 420px;
		width: 323px;
		padding: 16px 16px 0 16px;
		margin: 10px 10px 0 10px;
		position: absolute;
		top: 50px;
		border-radius: 10px 10px 0 0;
		font-size: 18px;


		map {
			width: 323px;
			height: 420px;
		}



	}

	.md {
		width: 342px;
		height: 150px;
		background-color: white;
		position: absolute;
		top: 496px;
		padding: 15px 10px 7px 23px;
		font-size: 14px;

		.lc {
			position: absolute;
			top: 10px;
			left: 315px;
			color: blue;
			text-align: right;
		}

		.name {
			height: 23px;
			font-size: 16px;
		}

		.time,
		.adress {
			padding-left: 3px;
			margin-top: 6px;
		}

		.picture {
			position: absolute;
			top: 45px;
			left: 268px;

			image {

				width: 91px;
				height: 51px;
			}

		}

		.button {
			display: flex;
			justify-content: space-around;
			text-align: center;
			line-height: 30px;
			position: relative;
			left: -5px;
			margin-top: 10px;
			color: white;

			image {
				//margin-top: 7px;
				height: 12px;
				width: 12px;
			}

			.button1 {
				width: 154px;
				height: 30px;
				background-color: #0662E6;
				border-radius: 15px;

			}

			.button2 {
				width: 154px;
				height: 30px;
				background-color: #FF4000;
				border-radius: 15px;
			}
		}
	}
</style>